<template>
  <div class="diary-container">
    <!-- 顶部轮播图 -->
    <el-carousel 
      indicator-position="outside"
      height="600px"
      class="carousel-container"
    >
      <el-carousel-item v-for="(img, index) in images" :key="index">
        <img :src="img" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>

    <!-- 主要内容区域 -->
    <div class="content-container">
      <!-- 用户信息区 -->
      <div class="user-info-card">
        <el-avatar :size="48" :src="diary.user.avatar" />
        <div class="user-meta">
          <h3 class="username">{{ diary.user.name }}</h3>
          <span class="post-time">{{ formatDate(diary.createTime) }}</span>
        </div>
        <el-button class="follow-btn" size="small">关注</el-button>
      </div>

      <!-- 标题和标签 -->
      <h1 class="diary-title">{{ diary.title }}</h1>
      <div class="tag-list">
        <el-tag 
          v-for="(tag, index) in diary.tags" 
          :key="index" 
          class="hash-tag"
          effect="plain"
          round
        >
          #{{ tag }}
        </el-tag>
      </div>

      <!-- 正文内容 -->
      <article class="diary-content">
        <p 
          v-for="(paragraph, index) in diary.content" 
          :key="index"
          class="content-paragraph"
        >
          {{ paragraph }}
        </p>
      </article>

      <!-- 互动操作区 -->
      <div class="action-bar">
        <div class="action-item" @click="toggleLike">
          <div class="icon-wrapper" :class="{ 'active': diary.liked }">
            <svg class="like-icon" viewBox="0 0 24 24">
              <path 
                :fill="diary.liked ? '#ff2442' : 'currentColor'" 
                :d="diary.liked ? heartFilled : heartOutlined"
              />
            </svg>
          </div>
          <span class="action-count">{{ diary.likeCount }}</span>
        </div>

        <div class="action-item" @click="toggleCollect">
          <div class="icon-wrapper" :class="{ 'active': diary.collected }">
            <svg class="collect-icon" viewBox="0 0 24 24">
              <path 
                :fill="diary.collected ? '#ffd700' : 'currentColor'" 
                :d="diary.collected ? starFilled : starOutlined"
              />
            </svg>
          </div>
          <span class="action-count">{{ diary.collectCount }}</span>
        </div>
      </div>

      <!-- 评论输入区 -->
      <div class="comment-editor">
        <el-avatar :size="40" :src="currentUser.avatar" />
        <div class="editor-container">
          <el-input
            v-model="newComment"
            type="textarea"
            :rows="2"
            placeholder="说点什么..."
            class="comment-textarea"
            resize="none"
            maxlength="200"
            show-word-limit
          />
          <el-button 
            type="primary" 
            class="submit-btn"
            :disabled="!newComment.trim()"
            @click="submitComment"
          >
            发布
          </el-button>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="comment-list">
        <h3 class="comment-header">全部评论（{{ comments.length }}）</h3>
        <div 
          v-for="comment in comments" 
          :key="comment.id" 
          class="comment-item"
        >
          <el-avatar :size="40" :src="comment.user.avatar" />
          <div class="comment-body">
            <div class="comment-meta">
              <span class="comment-author">{{ comment.user.name }}</span>
              <span class="comment-time">{{ formatTimeAgo(comment.time) }}</span>
            </div>
            <p class="comment-text">{{ comment.content }}</p>
            <div class="comment-actions">
              <span class="reply-action">回复</span>
              <span class="like-action">赞</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElCarousel, ElCarouselItem, ElAvatar, ElTag, ElButton, ElInput } from 'element-plus'
import { allDiaries } from '@/mock/diaryData'
import { useRoute } from 'vue-router'
// 图标路径数据
const heartFilled = 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'
const heartOutlined = 'M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'
const starFilled = 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'
const starOutlined = 'M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z'
const route = useRoute()
const diaryId = parseInt(route.params.id)
const targetDiary = allDiaries.find(d => d.id === diaryId) || {
  title: '日记加载失败',
  content: ['请检查日记ID是否正确'],
  images: [],
  tags: [],
  user: { name: '系统提示', avatar: '' },
  createTime: new Date().toISOString(),
  likeCount: 0,
  collectCount: 0,
  diaryComments: []
}



/* const diary = ref({
  title: '巴黎深度游｜塞纳河畔的浪漫之旅',
  user: {
    name: '旅行家小美',
    avatar: 'https://picsum.photos/48/48'
  },
  createTime: '2024-03-20T14:30:00',
  tags: ['法国旅行', '巴黎攻略', '摄影技巧', '美食探店'],
  content: [
    '第一天沿着塞纳河漫步，从巴黎圣母院到奥赛博物馆...',
    '第二天发现了超美的拍照机位，埃菲尔铁塔最佳视角...',
    '最后一天在玛黑区探店，推荐这家宝藏咖啡厅...'
  ],
  likeCount: 2458,
  liked: false,
  collectCount: 1234,
  collected: false
})
 */
 const diary = ref({
  ...targetDiary,
  liked: targetDiary.isLiked,
  collected: false
})

  // 图片数据
  const images = ref(targetDiary.images)

  /* const comments = ref([
  {
    id: 1,
    user: {
      name: '摄影爱好者',
      avatar: 'https://picsum.photos/40/40?1'
    },
    content: '求问第一张照片的拍摄参数！太美了！',
    time: '2024-03-20T15:30:00'
  },
  {
    id: 2,
    user: {
      name: '美食达人',
      avatar: 'https://picsum.photos/40/40?2'
    },
    content: '最后那家咖啡厅的地址能再具体点吗？',
    time: '2024-03-20T16:45:00'
  }
]) */

  // 评论系统
const comments = ref(targetDiary.diaryComments || [])

const currentUser = ref({
  name: '当前用户',
  avatar: 'https://picsum.photos/40/40?3'
})

const newComment = ref('')

// 交互方法
const toggleLike = () => {
  diary.value.liked = !diary.value.liked
  diary.value.likeCount += diary.value.liked ? 1 : -1
}

const toggleCollect = () => {
  diary.value.collected = !diary.value.collected
  diary.value.collectCount += diary.value.collected ? 1 : -1
}

const submitComment = () => {
  if (!newComment.value.trim()) return

  comments.value.unshift({
    id: Date.now(),
    user: { ...currentUser.value },
    content: newComment.value.trim(),
    time: new Date().toISOString()
  })

  newComment.value = ''
}

// 工具函数
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const formatTimeAgo = (dateString) => {
  const diff = Date.now() - new Date(dateString).getTime()
  const minutes = Math.floor(diff / 60000)
  if (minutes < 60) return `${minutes}分钟前`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}小时前`
  return `${Math.floor(hours / 24)}天前`
}
</script>

<style scoped lang="scss">
.diary-container {
  max-width: 800px;
  margin: 0px auto;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.carousel-container {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 32px;
  
  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.user-info-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 24px;

  .user-meta {
    flex: 1;
    
    .username {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }

    .post-time {
      color: #666;
      font-size: 12px;
      margin-top: 4px;
    }
  }

  .follow-btn {
    background: linear-gradient(135deg, #ff6b6b, #ff2442);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 24px;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.05);
    }
  }
}

.diary-title {
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 20px;
  color: #1a1a1a;
}

.tag-list {
  margin-bottom: 24px;
  
  .hash-tag {
    background: #f3f4f6;
    border: none;
    color: #666;
    margin-right: 8px;
    padding: 6px 12px;
    font-size: 14px;
  }
}

.diary-content {
  color: #333;
  line-height: 1.8;
  margin-bottom: 32px;

  .content-paragraph {
    margin: 18px 0;
    font-size: 15px;
  }
}

.action-bar {
  display: flex;
  gap: 40px;
  padding: 24px 0;
  margin: 32px 0;
  border-top: 1px solid #eee;

  .action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.05);
    }

    .icon-wrapper {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.03);
      transition: background 0.2s;

      &.active {
        background: rgba(255,36,66,0.1);
      }

      svg {
        width: 24px;
        height: 24px;
      }
    }

    .action-count {
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }

    .collect-icon {
      color: #ffd700;
    }
  }
}

.comment-editor {
  display: flex;
  gap: 16px;
  margin: 32px 0;

  .editor-container {
    flex: 1;
    position: relative;

    .comment-textarea {
      :deep(.el-textarea__inner) {
        border-radius: 20px;
        padding: 16px 20px;
        border: 1px solid #eee;
        transition: all 0.2s;

        &:focus {
          border-color: #ff2442;
          box-shadow: 0 0 0 2px rgba(255,36,66,0.1);
        }
      }
    }

    .submit-btn {
      position: absolute;
      right: 12px;
      bottom: 12px;
      padding: 8px 24px;
      border-radius: 20px;
      background: linear-gradient(135deg, #ff6b6b, #ff2442);
      border: none;
      transition: transform 0.2s;

      &:hover {
        transform: translateY(-1px);
      }
    }
  }
}

.comment-list {
  .comment-header {
    font-size: 18px;
    color: #1a1a1a;
    margin: 0 0 24px;
  }

  .comment-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    margin-bottom: 16px;
    background: #f8f9fa;
    border-radius: 12px;

    .comment-body {
      flex: 1;

      .comment-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;

        .comment-author {
          font-weight: 600;
          font-size: 14px;
        }

        .comment-time {
          color: #999;
          font-size: 12px;
        }
      }

      .comment-text {
        margin: 0;
        font-size: 14px;
        color: #333;
        line-height: 1.6;
      }

      .comment-actions {
        margin-top: 8px;
        font-size: 12px;
        color: #666;

        span {
          margin-right: 16px;
          cursor: pointer;
          transition: color 0.2s;

          &:hover {
            color: #ff2442;
          }
        }
      }
    }
  }
}

/* 动画效果 */
@keyframes heartBeat {
  0% { transform: scale(1); }
  15% { transform: scale(1.2); }
  30% { transform: scale(0.95); }
  45% { transform: scale(1.1); }
  60% { transform: scale(0.98); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.like-icon {
  transition: all 0.3s ease;

  &.active {
    animation: heartBeat 0.8s ease;
  }
}
</style>